<template>
	<el-container class="main">
	  <el-aside :style="{'width':isCollapse?'65px':'200px'}"  class="aside">
		  <el-menu :router="true" default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
		    <el-menu-item>
				
		    	<!-- <img src="../../assets/logo.png" alt="" style="position: absolute;left: -10px;"> -->
		    </el-menu-item>
			<el-menu-item>
		    	<i class="el-icon-s-unfold" @click="isCollapse=!isCollapse"></i>
		    	<span slot="title">收起</span>
		    </el-menu-item>
			<el-menu-item index="/admin/dash">
		    	<i class="el-icon-s-home"></i>
		    	<span slot="title">首页</span>
		    </el-menu-item>
			<el-submenu index="1">
		      <template slot="title">
		        <i class="el-icon-s-goods"></i>
		        <span slot="title">商品</span>
		      </template>
		      <el-menu-item-group>
		        <el-menu-item index="/admin/addgoods">商品管理</el-menu-item>
		        <el-submenu index="1-2">
		              <span slot="title">商品配置</span>
		              <el-menu-item index="/admin/orderlist">商品后台分类</el-menu-item>
					  <el-menu-item index="/admin/submit">图片库管理</el-menu-item>
		        </el-submenu>
		      </el-menu-item-group>
		    </el-submenu>
			<el-submenu index="2">
			     <template slot="title">
			       <i class="el-icon-coin"></i>
			       <span slot="title">交易</span>
			     </template>
				 <el-menu-item-group>
				   <el-menu-item index="/admin/refund">退款申请</el-menu-item>
				   
				 </el-menu-item-group>
			</el-submenu>
			<el-submenu index="3">
			     <template slot="title">
			       <i class="el-icon-user"></i>
			       <span slot="title">用户</span>
			     </template>
				 <el-menu-item-group>
				   <el-menu-item index="/admin/user">用户管理</el-menu-item>
				   <el-menu-item index="/login">用户登录</el-menu-item>
				 </el-menu-item-group>
			</el-submenu>
			<el-submenu index="4">
			     <template slot="title">
			       <i class="el-icon-s-shop"></i>
			       <span slot="title">门店</span>
			     </template>
				 <el-menu-item-group>
				   <el-menu-item index="/admin/shop">门店管理</el-menu-item>
				 </el-menu-item-group>
			</el-submenu>
			<el-submenu index="5">
			     <template slot="title">
			       <i class="el-icon-price-tag"></i>
			       <span slot="title">营销</span>
			     </template>
			</el-submenu>
			<el-submenu index="6">
			     <template slot="title">
			       <i class="el-icon-setting"></i>
			       <span slot="title">设置</span>
			     </template>
				 <el-menu-item-group>
				   <el-menu-item index="/admin/payset">支付设置</el-menu-item>
				   <el-menu-item index="/admin/goodsset">商品设置</el-menu-item>
				 </el-menu-item-group>
			</el-submenu>
		    <el-submenu index="7">
		         <template slot="title">
		           <i class="el-icon-phone"></i>
		           <span slot="title">服务</span>
		         </template>
		    </el-submenu>
			<el-submenu index="8">
			     <template slot="title">
			       <i class="el-icon-s-data"></i>
			       <span slot="title">数据</span>
			     </template>
			</el-submenu>
			<el-submenu index="9">
			     <template slot="title">
			       <i class="el-icon-discount"></i>
			       <span slot="title">结算</span>
			     </template>
			</el-submenu>
			<el-submenu index="10">
			     <template slot="title">
			       <i class="el-icon-document"></i>
			       <span slot="title">内容</span>
			     </template>
			</el-submenu>
			<el-menu-item>
					<img src="../../assets/xlo.png" alt="" style="position: absolute;left: -30px;" :class="{'active':isCollapse === true}">
					<img src="../../assets/logo2.png" alt="" style="position: absolute;left:-45px;height: 60px;" :class="{'active':isCollapse === false}">
			</el-menu-item>
		  </el-menu>
	  </el-aside>
	  <el-container>
	    <el-header class="header">
			<!-- <div>
			   <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
			</div> -->
			<el-badge is-dot class="item" style="position: absolute;right: 300px;">
			  <el-button class="share-button" icon="el-icon-message-solid" type="primary" 
			  ></el-button>
			</el-badge>
			<div class="block" style="position: absolute;right: 240px;"><el-avatar :size="40" :src="circleUrl"></el-avatar></div>
			<span v-if="user&&user.M_UserName" style="position: absolute;right: 180px;font-size: 16px;">管理员
			 <el-avatar style="position: absolute;right: 60px;top:-12px;" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
				<span @click="logOut()" style="position: absolute;right:-100px;top:-2px; font-size: 20px;color: dodgerblue;display:block;">退出登录</span>	
			</span>
			
			<span v-else style="position: absolute;right: 200px;font-size: 16px;">游客
			<router-link to="/login">
					<span style="position: absolute;right:-70px;top:-2px; font-size: 20px;color: dodgerblue;display:block;">登录</span>	
			</router-link>
			</span>
			
			
		</el-header>
	    <el-main class="main">
			
			  <el-tabs
			    v-model="activeIndex"
			    type="border-card"
			    closable
			    @tab-click="tabClick"
			    v-if="options.length"
			    @tab-remove="tabRemove">
			    <el-tab-pane
			      :key="item.route"
			      v-for="(item, index) in options"
			      :label="item.name"
			      :name="item.route">
			    </el-tab-pane>
				<transition name="fade" mode="out-in">
				<keep-alive>
					<router-view  v-if="$route.meta.keepAlive">
						<!-- 这里是会被缓存的视图组件 -->
					</router-view>
				</keep-alive>
			</transition>
			<transition name="fade" mode="out-in">
				<router-view v-if="!$route.meta.keepAlive">
				    <!-- 这里是不被缓存的视图组件 -->
				</router-view>
			</transition>
			  </el-tabs>
			
			
		</el-main>
	  </el-container>
	</el-container>
</template>

<script>
	import {Getmsg,Logout} from  '../../api/user/index.js'
	  export default {
		  created(){
			this.getUserInfo();
		  	window.addEventListener("resize",this.check)
		  },
		  beforeDestroy() {
		  	window.removeEventListener("resize",this.check)
		  },
		  data() {
		    return {
				user:{},
				userid:"",
		      isCollapse: true,
			  circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
		    };
		  },
		  computed: {
		     options () {
		       return this.$store.state.options;
		     },
		     activeIndex: {
		       get () {
		         return this.$store.state.activeIndex;
		       },
		       set (val) {
		         this.$store.commit('set_active_index', val);
		       }
		     }
		   },
		   watch: {
		     '$route'(to) {
		       let flag = false;
		       for (let option of this.options ) {
		         if (option.route === to.path) {
		           flag = true;
		           this.$store.commit('set_active_index', to.path);
		           break
		         }
		       }
		       if (!flag) {
		         this.$store.commit('add_tabs', {route: to.path, name: to.name});
		         this.$store.commit('set_active_index', to.path);
		       }
		     }
		   },
	    methods: {
			// tab切换时，动态的切换路由
			    tabClick (tab) {
			      let path = this.activeIndex;
			      this.$router.replace({path: path});
			    },
			    tabRemove (targetName) {
			      // 首页不可删除
			      if(targetName == '/') {
			        return;
			      }
			      this.$store.commit('delete_tabs', targetName);
			      if (this.activeIndex === targetName) {
			        // 设置当前激活的路由
			        if (this.options && this.options.length >= 1) {
			          this.$store.commit('set_active_index', this.options[this.options.length-1].route);
			          this.$router.replace({path: this.activeIndex});
			        } else {
			          this.$router.replace({path: '/'});
			        }
			      }
			    },
			getUserInfo(){
				// 获取用户信息
				Getmsg()
				// request.get("/member/ajax_login.php")
				.then(res=>{
					this.user=res.data
					 // window.localStorage.setItem("userid",this.user.M_UserName?this.user.M_UserName:'')
					})
				.catch(err=>console.log(err))
			},
			logOut(){
				Logout({dopost:'exit'})
				// request.post("/member/index_login.php","")
				.then(res=>{
					alert(res.data.msg);
					if(res.data.status==1){
						this.user= {};
						// 在vuex中清空user
						this.$store.commit("setUser",{})
						// 注销情况用户
						window.localStorage.setItem("userid","")
						window.localStorage.setItem("token","")
						this.$router.push("/login?redirect=/admin/dash")
					}
						})
				 
				 
			},
			check(){
				//获取窗口的宽
				var winW= window.innerWidth;
				//
				if(winW<1200){
					this.isCollapse = true;
				}else {
					this.isCollapse = false;
				}
			},
	      handleOpen(key, keyPath) {
	        console.log(key, keyPath);
	      },
	      handleClose(key, keyPath) {
	        console.log(key, keyPath);
	      }
	    }
	  }
</script>

<style>
	aside::-webkit-scrollbar{
		display: none;
	}

	p{
		color: #000051;
		font-size: 20px;
	}
	.mvp{
		color: #1E90FF;
		font-size: 15px;
	}
	.aside{
		/* background-color: #f0f0f0; */
	}
	.header{
		background-color:#fff;
		display: flex;
		align-items: center;
		position: relative;
		margin-left: 20px;
	}
	.main{
		/* 100vh一个屏幕的高 */
		height: 100vh;
		padding: 20px;
		/* background-color: #f3f3f3; */
	}
	.main .el-tabs__nav-scroll{
		position: fixed;
		top: 60px;
		z-index: 999;
		background-color: #fff;
		height: 30px;
		/* border: 2px solid #FFFFFF; */
	}
	.active{
		display: none;
	}

</style>
